<template>
    <div class="comments">
        <div class="comment_item" >
            <div class="item_left">
                <img width="100%" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fb97a811f-f5b3-41e4-95fd-17d7dd320b30%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1721203914&t=fc5a65842cce099f8d64ef9765acf92d" alt="">
            </div>
            <div class="item_right">
                <div class="user-info">
                    <a href="#" target="_blank" class="user-name">我对楓原万葉一心一意</a> 
                </div>
                <div class="expandable">
                    <div class="bui-expander-content" ref="content_comment">
                        <div class="multi-line-text">
                            来，咱俩掰扯掰扯新剧情文案
                            散兵送水那段，是，散兵刀子嘴豆腐心，文案组想突出这种性格，然后你看看你那破文案写的什么玩意，“你以为你自己很坚强？”，没十年大病你是写不出这种阴阳怪气的话
                            接下来更是重量級，卡萨扎莱宫对卡维什么意义大家又不是不知道，寻思尘歌壶剧情不就是增加好感度的吗，“我觉得卡萨扎莱宫一般”
                            ？？？
                            我直接瓦尔特，地铁，手机
                            咋的，想代入艾尔海森视角？关键是艾尔海森都说不出这么初陞的话，你们文案组是不是有点大病？
                            珐露珊邀约怼小提，3.5的风花节白过了，过初陞文案脑子里了？
                            稻妻文案拉胯的一批，心海传说任务拉胯的一批，雷神传说任务一拉胯的一批，还好二救回来了，以为须弥好点了，得，这是又回来了，文案组几个木琴敢这么写呀。
                            建议别二创入脑，屑荧屑空。对别的npc毕恭毕敬，对自己队伍角色重拳出击
                            总结：这次活动文案垃圾，换个文案组吧，不想看到这么窒息的文案组
                            越想越气，给你三星都是多了，改成两星了
                            这个帖子并没有攻击各种角色的意思，单纯的攻击发疯文案组
                            --------------4.2-------
                            米哈游呜呜呜，我的芙芙呜呜呜，你5星有了
                            芙宁娜无愧于水神之名，她！是！芙！芙！
                            「众水、众方、众民与众律法的女王」
                            再见，芙卡洛斯  欢迎回来，芙宁娜
                            —————————分割线————————
                            乐了，卡维尘歌壶剧情，须弥活动剧情崩难道不是事实？给我扣各种帽子的建议你长长脑子，看到不舒服的评论也会怼，我老玻璃心了[给心心][给心心][给心心]
                            —————————再次分割—————————
                            评论哪里让你破防了在我留言区留完言就给我拉黑了，真有乐子
                            ————————————————————————
                            woc什么时候200多条了，和别人对线都要翻好久[脱单doge]
                            ——————————————————————————————
                            woc还真有人来我主页查成分呀，不用查了我直接说，崩铁原9战舟鼠我都玩，大不大龄我不知道反正不是圣女一枚呀
                        </div>
                    </div>
                    <div class="bui-expander-switch" @click="switch_comment_fn"><span ref="text_comment">展開</span><i ref="i_comment"></i></div>
                </div>

                <footer class="clearfix"><span title="2024-06-12 19:17:36">4天前</span> 
                    <div class="comment-toolbar">
                        <div class="autohide">
                            <a @click="isShow_report = true" href="javascript:;" ga-data="game_comment_page:3020105">舉報</a> 
                            <span class="bui-vr"></span>
                        </div> 
                        <a  @click="toggleLike"  href="javascript:;" title="赞" ga-data="game_detail_page:3010306,game_comment_page:3020101" class="up-count">
                            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" viewBox="0 0 14 14" xml:space="preserve" class="bui-icon bui-icon-like">
                                <path d="M12,4H7c1.1,0,1-2,1-2c0-1.1-0.9-2-2-2S4.8,2.2,4,3S3,4,3,4v10h7c1.1,0,2.2-0.6,3-2l1-6C14,4.9,13.1,4,12,4z
                                    M0,5v8c0,0.6,0.4,1,1,1s1,0,1,0V4c0,0-0.4,0-1,0S0,4.4,0,5z" fill="gray" ref="zan_status"></path>
                                </svg>
                            {{ likes }}
                        </a> 
                        <span class="bui-vr"></span> 
                        <a @click="toggleDislike"  href="javascript:;" title="踩" ga-data="game_detail_page:3010307,game_comment_page:3020102" class="down-count active">
                            <svg style="position: relative;top:3px;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" viewBox="0 0 14 14" xml:space="preserve" class="bui-icon bui-icon-dislike">
                                <path d="M13,2c-0.8-1.4-1.9-2-3-2H3v10c0,0,0.2,0.2,1,1s0.9,3,2,3s2-0.9,2-2c0,0,0.1-2-1-2h5c1.1,0,2-0.9,2-2L13,2z
                                M0,1v8c0,0.6,0.4,1,1,1s1,0,1,0V0c0,0-0.4,0-1,0S0,0.4,0,1z" fill="gray" ref="cai_status"></path>
                            </svg>
                            {{ dislikes }}
                        </a> 
                        <span class="bui-vr"></span> 
                        <a href="javascript:;" ga-data="game_comment_page:3020103" class="reply-count">
                            <svg style="position: relative;top:2px;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" viewBox="0 0 16 14" xml:space="preserve" class="bui-icon bui-icon-chat">
                                <path d="M10,0H6C2.7,0,0,2.7,0,6c0,3,2.2,5.4,5,5.9V12v2l5-2c3.3,0,6-2.7,6-6S13.3,0,10,0z M4,7C3.4,7,3,6.6,3,6
                                s0.4-1,1-1s1,0.4,1,1S4.6,7,4,7z M8,7C7.4,7,7,6.6,7,6s0.4-1,1-1s1,0.4,1,1S8.6,7,8,7z M12,7c-0.6,0-1-0.4-1-1s0.4-1,1-1s1,0.4,1,1
                                S12.6,7,12,7z" fill="gray" ></path>
                            </svg> 
                                收起回復
                        </a>
                    </div>
                </footer>
                <div class="reply-list">
                    <div class="reply_main">
                        <div class="reply-list-item" v-for="item in 5">
                            <div style="display: flex;">
                                <div class="item_left">
                                    <img width="100%" src="https://img1.baidu.com/it/u=1044564575,2623100986&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">
                                </div>
                                <div class="item_right">
                                    <div class="user-info">
                                        <a href="#" target="_blank" class="user-name">咕咕道人</a> 
                                    </div>
                                    <div class="multi-line-text">
                                        我估计文案组被XXN入侵了，但凡正常的男性都不会写怎么沙币的剧情
                                    </div>
                                    <footer class="clearfix">
                                        <span title="2024-06-15 17:28:39">1天前</span> 
                                        <div class="comment-toolbar" style="margin-right: 10px;">
                                            <div class="autohide">
                                                <a @click="isShow_report = true" href="javascript:;" ga-data="game_comment_page:3020105">舉報</a> 
                                                <span class="bui-vr"></span>
                                            </div> 
                                            <a href="javascript:;" title="赞" ga-data="game_detail_page:3010306,game_comment_page:3020101" class="up-count">
                                                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" viewBox="0 0 14 14" xml:space="preserve" class="bui-icon bui-icon-like">
                                                    <path d="M12,4H7c1.1,0,1-2,1-2c0-1.1-0.9-2-2-2S4.8,2.2,4,3S3,4,3,4v10h7c1.1,0,2.2-0.6,3-2l1-6C14,4.9,13.1,4,12,4z
                                                    M0,5v8c0,0.6,0.4,1,1,1s1,0,1,0V4c0,0-0.4,0-1,0S0,4.4,0,5z"></path>
                                                </svg>
                                                1
                                            </a> 
                                            <span class="bui-vr"></span> 
                                            <a @click="openReply" href="javascript:;" ga-data="game_detail_page:3010308,game_comment_page:3020104" class="reply-count">
                                                <svg style="position: relative;;top: 2px;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" viewBox="0 0 16 14" xml:space="preserve" class="bui-icon bui-icon-chat">
                                                    <path d="M10,0H6C2.7,0,0,2.7,0,6c0,3,2.2,5.4,5,5.9V12v2l5-2c3.3,0,6-2.7,6-6S13.3,0,10,0z M4,7C3.4,7,3,6.6,3,6
                                                    s0.4-1,1-1s1,0.4,1,1S4.6,7,4,7z M8,7C7.4,7,7,6.6,7,6s0.4-1,1-1s1,0.4,1,1S8.6,7,8,7z M12,7c-0.6,0-1-0.4-1-1s0.4-1,1-1s1,0.4,1,1
                                                    S12.6,7,12,7z" fill="gray"></path>
                                                </svg>
                                                回復
                                            </a>
                                        </div>
                                    </footer>
                                </div>
                            </div>    
                            
                        </div>
                    </div>
                    <div v-show="isShow_reply" class="comment" ref="comment">
                        <textarea class=""></textarea>
                        <button type="submit" class="bui-btn">發佈</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="blocker" v-if="isShow_report">
        <div class="modal">
            <div class="message">确认举报？</div>
            <div class="btns one-row">
                <a class="btn-ok" href="javascript:;">确定</a>
                <a @click="isShow_report = false" class="btn-cancel" href="javascript:;">取消</a>
            </div>
        </div>
    </div>
</template>

<script setup>
    import {ref} from 'vue'
    import switch_bar from "@/hooks/switch_bar"
    let switch_status_comment = ref(true) //展开收起状态
    const content_comment = ref() //文本容器
    const text_comment = ref() //展开收起按钮
    const i_comment = ref() //图标按钮
    const switch_comment_fn = ()=>{ //点击函数
        switch_bar(switch_status_comment,content_comment,text_comment,i_comment)
    }

    const likes = ref(0);
    const dislikes = ref(0);
    const isLiked = ref(false);
    const isDisliked = ref(false);


    let zan_status = ref()
    let cai_status = ref()
    

    const toggleLike = () => {
        if (isLiked.value) {
            likes.value--;
            isLiked.value = false;
            zan_status.value.setAttribute('fill', 'gray');
        } else {
            likes.value++;
            zan_status.value.setAttribute('fill', '#47a0ef');
            if(isDisliked.value){
                cai_status.value.setAttribute('fill', 'gray');
            }
            if (isDisliked.value) {
                dislikes.value--;
                isDisliked.value = false;
            }
            isLiked.value = true;
            
        }
    };

    const toggleDislike = () => {
        if (isDisliked.value) {
            dislikes.value--;
            isDisliked.value = false;
            cai_status.value.setAttribute('fill', 'gray');
        } else {
            dislikes.value++;
            cai_status.value.setAttribute('fill', '#47a0ef');
            if(dislikes.value){
                zan_status.value.setAttribute('fill', 'gray');
            }
            if (isLiked.value) {
                likes.value--;
                isLiked.value = false;
            }
            isDisliked.value = true;
            
        }
    };

    let isShow_reply = ref(false);
    const openReply = ()=>{
        if(isShow_reply.value){
            isShow_reply.value = false;
        }else{
            isShow_reply.value = true;
        }
    }

    let isShow_report = ref(false); //评论举报框
</script>

<style lang="less" scoped>
.comments{
    margin-top: 75px;
    .comment_item{
        border-top: 1px solid #eee;
        padding-top: 20px;
        margin-top: 20px;
        display: flex;
        .item_left{
            width: 10%;
            text-align: center;
            img{
                width: 50px;
                height: 50px;
                border-radius: 50%;
            }
        }
        .item_right{
            width: 90%;
            .user-name {
                color: #6d757a;
                font-weight: 700;
                text-decoration: none;
                font-size: 16px;
            }
            .expandable{
                margin: initial !important;
                .bui-expander-content{
                    overflow: hidden;
                    transition: max-height .5s ease;
                    max-height: 10.5em;
                    .multi-line-text {
                        color: #666;
                        padding-right: 1px;
                        white-space: pre-wrap;
                        line-height: 2;
                        font-size: 14px;
                    }
                }
                .bui-expander-switch {
                    text-align: right;
                    color: #23ade5;
                    cursor: pointer;
                    line-height: 2;
                    background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(#fff));
                    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
                }
                i {
                    background-repeat: no-repeat;
                    background-size: contain;
                    background-image: url();
                    display: inline-block;
                    vertical-align: middle;
                    width: 14px;
                    height: 14px;
                    margin-left: 5px;
                }
                .switch-icon-down{
                    background-image: url() !important;
                }
            }
            footer {
                width: 100% !important;
                margin: initial;
                font-size: 12px;
                color: #999;
                margin-top: 5px;
                .comment-toolbar {
                    float: right;
                    a{
                        color: #999;
                        text-decoration: none;
                        .bui-icon-like {
                            margin-right: 2px;
                            margin-top: -3px;
                            width: 14px;
                            height: 14px;
                            fill: #ccd0d7;
                            display: inline-block;
                            vertical-align: middle;
                        }
                        svg{
                            width: 14px;
                            height: 14px;
                        }
                    }
                    .autohide{
                        display: inline-block;
                    }
                    .bui-vr {
                        display: inline-block;
                        vertical-align: middle;
                        width: 1px;
                        height: 1em;
                        background-color: #dce3e6;
                        margin: 0 1em;
                    }
                }
            }
            .reply-list{
                margin-top: 20px;
                .reply_main{
                    max-height: 500px;
                    overflow: auto;
                }
                
                .reply_main::-webkit-scrollbar {
                    width: 5px; /* Width of the scrollbar */
                }

                .reply_main::-webkit-scrollbar-track {
                    background: #f1f1f1; /* Color of the track */
                    border-radius: 10px; /* Rounded corners */
                }

                .reply_main::-webkit-scrollbar-thumb {
                    background: #888; /* Color of the scrollbar thumb */
                    border-radius: 10px; /* Rounded corners */
                }

                .reply_main::-webkit-scrollbar-thumb:hover {
                    background: #555; /* Color of the scrollbar thumb on hover */
                }
                .reply-list-item {
                    border-top: 1px solid #eee;
                    padding-top: 20px;
                    margin-top: 20px;
                    .item_right{
                        .user-name{
                            font-size: 13px;
                        }
                        .multi-line-text{
                            color: #666;
                            padding-right: 1px;
                            white-space: pre-wrap;
                            line-height: 2;
                            font-size: 14px;
                            max-height: 9em;
                            overflow: auto;
                        }
                        
                    }
                    
                }
                .comment{
                    textarea{
                        margin-top: 20px;
                        display: block;
                        font-size: 12px;
                        width: 100%;
                        height: 60px;
                        -webkit-box-sizing: border-box;
                        box-sizing: border-box;
                        padding: 6px 10px;
                        border: 1px solid #23ade5;
                        border-radius: 5px;
                        outline: 0 none;
                        resize: vertical;
                    }
                    .bui-btn{
                        margin-top: 20px;
                        position: relative;
                        border: 0 none;
                        background-color: #23ade5;
                        color: #fff;
                        cursor: pointer;
                        border-radius: 5px;
                        float: right;
                        -webkit-box-sizing: border-box;
                        box-sizing: border-box;
                        width: 98px;
                        height: 30px;
                        line-height: 30px;
                    }
                }
            }
        }
    }

}
.blocker::before{
    content: '';
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .3);

}
.blocker{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    height: 100%;
    .modal{
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 320px;
        height: 130px;
        background-color: #fff;
        box-shadow: 1px 3px 20px rgba(0, 0, 0, .5);
        padding: 30px;
        .message{
            margin-top: 20px;
            text-align: center;
            font-size: 18px;
        }
        .btns{
            font-size: 14px;
            margin-top: 30px;
            display: flex;
            .btn-ok {
                color: #fff;
                background-color: #23ade5;
                
            }
            .btn-cancel {
                color: #666;
                border: 1px solid #ccc;
            }
            a{
                display: block;
                width: 140px;
                height: 36px;
                line-height: 36px;
                border-radius: 5px;
                text-align: center;
                text-decoration: none;
            }
        }
    }
}

</style>